import React, { useEffect, useState } from 'react'
import './layout.scss'
import axios from '../utils/request'
import { Auth, menuTree } from './auth.js'
import { Layout, Button, Menu,  Modal } from 'antd';
import { useNavigate, useLocation, Outlet } from 'react-router-dom';
const { Header, Sider, Content } = Layout;




export default function Layouts() {
  const [menu, setmenu] = useState([])
  let navigator = useNavigate()
  // let location = useLocation()
  // console.log(location);
  useEffect(() => {

    let isLogo = Auth();
    if (!isLogo) {
      navigator('/login')
    }
    getMenu();

  },[])

  const getMenu = async () => {
    let { data, meta } = await axios.get('menus')
    // console.log(data, meta);
    let tree = menuTree(data)
    // console.log(tree)
    setmenu(tree)
  }
  // 点击侧边栏跳转
  const handMenu = ({ key }) => {
    navigator(key)
  }
  // 退出
  const [isModalVisible, setIsModalVisible] = useState(false);
  const goout = () => {
    setIsModalVisible(true);
  }
  const handleOk = () => {
    localStorage.clear()
    navigator("/login")
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  //退出


  // 只展开一个
  const rootSubmenuKeys = ['users', 'rights', 'goods', 'orders', 'reports'];
  const [openKeys, setOpenKeys] = useState([]);
  const onOpenChange = (keys) => {
    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  };
  // 只展开一个


  return (
    <div className='layout-box'>
      <Layout>
        <Header className='header'>
          <div className='logo'>电商后台管理</div>
          <div className='goout'>
            <>
              <Button type='primary' onClick={goout}>退出</Button>
              <Modal title="退出？" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <p>你确定要退出当前页嘛？</p>

              </Modal>
            </>


          </div>
        </Header>
        <Layout style={{ minHeight: 'calc(100vh - 64px)' }}>
          <Sider collapsible theme='light'>
            <Menu mode='inline' openKeys={openKeys}
              onOpenChange={onOpenChange} items={menu} onClick={handMenu} >

            </Menu>
          </Sider>
          <Content className='content'>

            {/* 主内容区域 */}
            <Outlet />
            {/* 主内容区域 */}
          </Content>
        </Layout>
      </Layout>

    </div>
  )
}
